<div class="giveHeight"> 
    <table class="responsive dynamicTable display table table-bordered dataTable">
        <thead>        
            <tr>
{# sorting of properties based on query components #}
                    <th>Département</th>
                    <th>Caisse</th>
                    <th>Date ouverture</th>
                    <th>Solde Initial</th>
                    <th>Action</th>
                </tr>
            </thead>

{# table body #}
{% for sessionCaisse in pagination %}
            <tr {% if loop.index is odd %}class="color"{% endif %}>
                <td>{{sessionCaisse.caisse.departement}}</td>
                <td>{{ sessionCaisse.caisse }}</td>
                <td>{{ sessionCaisse.date|date('d/m/Y H:i') }}</td>
                <td>{{sessionCaisse.soldeInitial|number_format(3)}}</td>
                <td class="center ">
                    <div class="controls center">
                        <a class="tip" href="javascript:afficheSessionCaisse('{{sessionCaisse.id}}')" oldtitle="Edit task" title="" aria-describedby="ui-tooltip-4">
                            <span class="icon12 icomoon-icon-pencil"></span>
                        </a>
                           
                    </div>
                </td>
            </tr>
{% endfor %}
        </table>
    </div>
    <div id="DataTables_Table_0_info" class="dataTables_info">Affichage de {{ (pagination.getCurrentPageNumber -1)*pagination.getItemNumberPerPage + 1}} à {{ (pagination.getCurrentPageNumber -1)*pagination.getItemNumberPerPage + pagination.getItemNumberPerPage}} de {{ pagination.getTotalItemCount }}Session de caisses</div>
{# display navigation #}
    <div id="DataTables_Table_0_paginate" class="dataTables_paginate paging_full_numbers">
    {{ knp_pagination_render(pagination) }}
        </div>
        <div style="display: none" id="modal" title="Dialog Title" class="dialog">
            <input type="hidden" id="caisse_remove_id" value="" />
            <p>Voulez-vous vraiment placer <span id="text_libelle" style="font-weight: bold"></span> dans la corbeille ?</p>
        </div>
        <script>
            function afficheSessionCaisse(id) {
                $.ajax({
                    url: '{{path('gds_session_caisse_affiche')}}',
                    data: 'id=' + id,
                    success: function(data) {
                        $('#div_session_caisse').html(data)
                    }
                })
            }
             {% if is_granted('ROLE_SUPER_ADMIN') %}
            function removeCaisse(id, libelle) {
                $('#caisse_remove_id').val(id)
                $('#modal').dialog({
                    autoOpen: false,
                    widht : 100,
                        modal: true,
                    dialogClass: 'dialog',
                    buttons: {
                        "Non": function() {
                            $(this).dialog("close");
                            
                        },
                        "Oui": function(id){
                        $.ajax({
                                url: '{{path('gds_caisse_delete')}}',
                                data: 'id=' + $('#caisse_remove_id').val(),
                                success: function(data) {
                                    $('#div_caisse').html(data)
                                    
                                }
                            })
                            $(this).dialog("close");
                            $(this).remove()
                        }
                    }
                });
                $('#ui-dialog-title-modal').html('Suppresion :' + libelle)
                $('#text_libelle').html(libelle)
                $('#modal').dialog('open');

            }
            {% endif %}
            </script>